<template>
	<view class="content bg-default">
		<!-- 左侧菜品分类 -->
		<view class="dish-types">
			<!-- 今日 -->
			<DishType
				class="dish-type"
				icon="../../static/icons/calendar.png"
				name="今日"
				:active="active === -1"
				@tap="onDishTypeClick(-1)"
			/>
			<!-- 所有菜品分类 -->
			<DishType
				v-for="item in dishTypes"
				:key="item.id"
				class="dish-type"
				:icon="item.icon"
				:name="item.name"
				:active="active === item.id"
				@tap="onDishTypeClick(item.id)"
			/>

			<DishType
				style="margin-top: auto"
				icon="../../static/icons/setting.svg"
				name="设置"
				@tap="onSetting"
			/>
		</view>
		<!-- 右侧菜品 -->
		<view class="dishes">
			<!-- 日期选择器 -->
			<uni-datetime-picker
				style="line-height: 50px; font-weight: bold"
				v-if="active === -1"
				v-model="dailyMenuDate"
				type="date"
				:clear-icon="false"
				:border="false"
				@change="onDailyMenyDateChange"
			/>

			<!-- 菜品搜索框 -->
			<uni-search-bar
				v-show="active !== -1"
				v-model="searchText"
				class="uni-mt-10"
				radius="5"
				placeholder=""
				clearButton="auto"
				cancelButton="none"
			/>

			<scroll-view
				class="dishes-container"
				scroll-y="true"
			>
				<DishCard
					class="dish-card"
					v-for="dish in filteredDishList"
					:key="dish.id"
					:dish-id="dish.id"
					:name="dish.name"
					:type="dish.dishType"
					:score="dish.score"
					:count="dish.scorecount"
					:image="dish.imageurl"
					show-comment-button
					:swipe="isAdmin"
					@deleted="onDishDeleted"
				/>

				<view
					class="add-dish"
					v-if="isAdmin && active === -1"
				>
					<button
						v-if="dishList.length === 0"
						class="add-dish-btn"
						type="primary"
						size="mini"
						@tap="navigateToCreateDailyMenuPage"
					>
						添加菜品
					</button>

					<button
						v-else
						class="add-dish-btn"
						type="primary"
						size="mini"
						@tap="navigateToCreateDailyMenuPage"
					>
						修改菜单
					</button>
				</view>

				<view
					v-if="isAdmin && active !== -1"
					style="text-align: center"
				>
					<button
						class="add-dish-btn"
						type="primary"
						size="mini"
						@click="navigateToCreateDish"
					>
						添加菜品
					</button>
				</view>

				<!-- <view>id: {{ userStore.id }}</view>
				<view>phone: {{ userStore.phone }}</view>
				<view>role: {{ userStore.role }}</view>

				<view>menuTypeId: {{ menuTypeId }}</view>
				<view>dailyMenuId: {{ dailyMenuId }}</view>
				<view>dailyMenuDate: {{ dailyMenuDate }}</view> -->

				<!-- 提示信息弹窗 -->
				<uni-popup
					class="popup-setting"
					ref="popupRef"
					type="bottom"
				>
					<view
						class="bg-white"
						style="padding: 72rpx 36rpx"
					>
						<button
							type="primary"
							style="margin-bottom: 36rpx"
							@tap="onChangePassword"
						>
							修改密码
						</button>
						<button
							type="default"
							@tap="onLogout"
						>
							退出登录
						</button>
					</view>
				</uni-popup>
			</scroll-view>
		</view>

		<!-- 手机号、密码登录弹窗 -->
		<!-- <uni-popup
			ref="popup"
			background-color="#fff"
			:mask-click="false"
		>
			<view class="popup-content">
				<view class="popup-content-title">登录聚芯食堂</view>
				<LoginBox></LoginBox>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
import { useUserStore, USER } from '@/stores/user';
import { getDishesByDishTypeId } from '../../apis/dish.js';
import { getDailyMenuDishes } from '../../apis/dailyMenu.js';

export default {
	data() {
		return {
			userStore: useUserStore(),
			// 当前选中的菜品分类的索引
			active: -1,
			// 所有菜品分类
			dishTypes: [],
			// 今日菜品
			dishList: [],

			// 查看今日菜单时，选择的日期，默认当天
			dailyMenuDate: new Date().toLocaleDateString(),
			// 今日菜单id
			dailyMenuId: 0,
			// 菜单类型id 3菜1汤
			menuTypeId: 0,

			// 搜索名称
			searchText: '',
		};
	},
	computed: {
		isAdmin() {
			return this.userStore?.role >= 2;
		},

		filteredDishList() {
			return this.dishList.filter((a) => a.name.includes(this.searchText));
		},
	},
	created() {
		// console.log('check', !useUserStore().checkUser());
		if (!useUserStore().checkUser()) {
			console.log('未登录，返回登录页面');
			uni.redirectTo({
				url: '../login/login',
			});
			return;
		}

		this.getDishTypes();
		// 第一次打开页面，默认获取active对应菜品分类的菜
		this.onDishTypeClick(this.active);
	},
	onLoad() {},
	onShow() {
		this.onDishTypeClick(this.active);
	},
	methods: {
		getDishTypes() {
			this.dishTypes = [
				{ id: 1, name: '大荤', icon: '../../static/icons/chicken.png', order: 1 },
				{ id: 2, name: '小荤', icon: '../../static/icons/drumstick.png', order: 2 },
				{ id: 3, name: '素菜', icon: '../../static/icons/carrot.png', order: 3 },
				{ id: 4, name: '汤品', icon: '../../static/icons/soup.png', order: 4 },
				{ id: 5, name: '面条', icon: '../../static/icons/noodle.png', order: 5 },
			];
		},
		// 点击分类获取菜品
		onDishTypeClick(id) {
			this.active = id;
			// console.log('this.active', this.active);
			// 点击今日
			if (id === -1) {
				this.searchText = '';
				return this.getDailyMenuDishes();
			}
			// 点击分类
			this.getDishesByType();
		},
		// 获取今日菜单
		getDailyMenuDishes() {
			getDailyMenuDishes(this.dailyMenuDate).then((res) => {
				// console.log('今日菜单', res);
				// return;
				const { id, dishes = [], menuTypeId } = res;
				this.menuTypeId = menuTypeId;
				this.dailyMenuId = id;
				if (dishes.length > 1) {
					dishes.sort((a, b) => parseInt(a.dishTypeId) - parseInt(b.dishTypeId));
				}
				this.dishList = dishes;
			});
		},
		// 分类获取菜品
		getDishesByType() {
			uni.showLoading({
				title: '',
				mask: true,
			});

			console.log('avtive', this.active);

			if (this.active === -1) {
				this.getDailyMenuDishes();
				return;
			}

			// console.log('分类id 菜品', id);
			getDishesByDishTypeId(this.active)
				.then((res) => {
					// console.log('分类获取菜品', res);
					this.dishList = res;
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		// 删除菜单后更新菜品
		onDishDeleted() {
			this.getDishesByType();
		},
		// 选择今日菜单的日期
		onDailyMenyDateChange(e) {
			// console.log('onDailyMenyDateChange', e);
			// 根据日期获取今日菜单
			this.getDailyMenuDishes();
		},
		navigateToCreateDish() {
			uni.navigateTo({
				url: `../../pages/create-dish/create-dish?dishTypeId=${this.active}`,
			});
		},
		navigateToCreateDailyMenuPage() {
			uni.navigateTo({
				// url: '../../pages/creaate-daily-menu/creaate-daily-menu?date=' + this.dailyMenuDate,
				url: `../../pages/creaate-daily-menu/creaate-daily-menu?date=${this.dailyMenuDate}&dailyMenuId=${this.dailyMenuId || ''}&menuTypeId=${this.menuTypeId || ''}`,
			});
		},

		onSetting() {
			this.$refs.popupRef.open('buttom');
		},
		onChangePassword() {
			uni.navigateTo({
				url: '/pages/password/password',
			});
			this.$nextTick(() => {
				this.$refs.popupRef.close('buttom');
			});
		},
		onLogout() {
			uni.showModal({
				title: '确定退出吗',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
						useUserStore().saveUser({
							id: '',
							role: -1,
							phone: '',
						});
						uni.redirectTo({
							url: '/pages/login/login',
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				},
			});
			// console.log('onLogout');
		},
		// handlePasswordLogin() {
		// 	this.$refs.popup.open('bottom');
		// },
	},
};
</script>

<style scoped>
.content {
	display: flex;
}

.dish-types {
	width: 150rpx;
	display: flex;
	flex-direction: column;
}
.dish-type {
	width: 150rpx;
	height: 150rpx;
}

.dishes {
	flex: 1;
	background-color: #fff;

	display: flex;
	flex-direction: column;
}

.dishes-container {
	height: calc(100% - 56px);
}

.dish-card {
	/* margin: 12rpx; */
}
.add-dish {
	text-align: center;
}
.add-dish-btn {
	width: 160rpx;
	padding: 0;
	margin-top: 24rpx;
}

.popup-setting {
	padding: 72rpx 36rpx;
}
</style>
